<template>

  <div v-if="isIcon" class="file-icon" :class="[data.type]">

    <div v-if="isImage">

      <img :src="data.openPath" style="width: 200px;height: 200px">

    </div>

  </div>

</template>

<script>
export default {
  props: {
    data: {
      validator: function(value) {
        return (
          [
            'default',
            'folder',
            'FOLDER',
            'MP4',
            'pdf',
            'compress_file',
            'web',
            'video',
            'audio',
            'picture',
            'doc',
            'txt',
            'torrent',
            'ppt',
            'jpg',
            'JPG',
            'code'
          ].indexOf(value.type) !== -1
        )
      }
    }
  },
  data() {
    return {
      isIcon: true,
      isImage: false
    }
  },
  created() {
    /*    console.log('--------------',this.data.openPath)
    if( this.data.type =='JPG' || this.data.type == "GIF"  || this.data.type == "JPEG" || this.data.type == "PNG"){
      this.isIcon = false;
      this.isImage = true;
      console.log('--------------=------------------------')
    }*/
  },
  methods: {}
}
</script>

<style ref="stylesheet/scss" lang="scss" scoped>
.file-icon {
  display: inline-block;
  background-image: url(../../assets/folder/file_icons.png);
  background-repeat: no-repeat;
  width: 26px;
  height: 23px;
}
.default {
  background-position: -596px -566px;
}
.folder {
  background-position: -594px -862px;
}
.FOLDER {
  background-position: -594px -862px;
}
.pdf {
  background-position: -596px -136px;
}
.PDF {
  background-position: -596px -136px;
}
.compress_file {
  background-position: -596px -1664px;
}
.video {
  background-position: -596px -1630px;
}
.MP4 {
  background-position: -596px -1630px;
}
.FLV {
  background-position: -596px -1630px;
}
.AVI {
  background-position: -596px -1630px;
}
.audio {
  background-position: -596px -442px;
}
.picture {
  background-position: -596px -306px;
}
.PNG {
  background-position: -596px -306px;
}
.jpg {
  background-position: -596px -306px;
}
.JPG {
  background-position: -596px -306px;
}
.doc {
  background-position: -596px -170px;
}
.DOC {
  background-position: -596px -170px;
}
.DOCX {
  background-position: -596px -170px;
}
.txt {
  background-position: -596px -102px;
}
.ppt {
  background-position: -596px -204px;
}
.TXT {
  background-position: -596px -102px;
}
.PPT {
  background-position: -596px -204px;
}
.torrent {
  background-position: -596px 0px;
}
.web {
  background-position: -594px -1458px;
}
.HTML {
  background-position: -594px -1458px;
}
.code {
  background-position: -596px -1424px;
}
</style>

